@import "./public";

.web{
    @include web(750,1472);
    header{
        @include web(750,130);
        position: fixed;
        top: 0;
        z-index: 99999999999;     
        background-color: white;
        .title-product{
            @include web(750,130);
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: size(10);
            input{
                width: size(123);
                height: size(57);
                border-radius: size(20);
                background-color: white;
                border: size(2) solid $back;
            }
            img{
                width: size(52);
                height: size(50);
            }
        }
    }

    main{
        .domain-options{
            @include web(750,1110);
            margin-top: size(145);

            .swiper-slide{
                img{
                    width: size(750);
                    height: size(260);
                }
            }
            .buy{
                width: size(720);
                height: size(75);
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: size(10);
                p{
                    font-size: size(72);
                    color: $back;
                }
                input{
                    width: size(111);
                    height: size(59);
                    border: size(2) solid $back;
                    border-radius: size(20);
                    background-color: $back;
                    color: white;
                }
            }

            .evaluate{
                width: size(720);
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: size(12);
                img{
                    width: size(38);
                    height: size(36);
                }
                p:first-child{
                    margin-left: size(10);
                    span{
                        font-size: size(30);
                        color: $back;
                    }
                }
                p:last-child{
                    font-size: size(26);
                    color: gray;
                }
            }

            .pos{
                width: size(664);
                height: size(67);
                border: 1px solid $back;
                background-color: $back;
                color: white;
                margin: 0 auto;
                margin-top:size(30);
                font-size: size(30);
                p{
                    display: flex;
                    justify-content: space-between;   
                    margin-top: size(18);   
                    outline: none;              
                }
            }

            .listdeta{
                @include web(730,164);
                margin-top: size(30);
                display: flex;
                justify-content: space-between;
                align-items: center;
                line-height:size(42);
                img{
                    width: size(177);
                    height: size(176);
                }
                .dateone{
                    width: size(540);
                    overflow:scroll;
                    position: relative;
                    p:first-child{
                        font-size: size(30);
                        font-weight: bold;
                    }
                    p:nth-child(3){
                        font-size: size(22);
                        color: gray;
                    } 
                    p:last-child{
                        a{
                            text-decoration: none;
                            color: $back;
                            font-size: size(20);
                        }
                        input{
                            width: size(111);
                            height: size(59);
                            border: size(2) solid $back;
                            border-radius: size(20);
                            background-color: $back;
                            color: white;
                            float: right;
                            position: absolute;
                            right: size(35);
                            bottom: size(30);
                        }
                    }
                }
                .imgtwo{
                    position: relative;
                    p{
                        width: size(177);
                        height: size(39);
                        background-color: white;
                        opacity: 0.6;
                        position: absolute;
                        top: size(92);
                        text-align: center;
                        font-size: size(24);
                    }
                }

                .imgsixteen{
                    width: size(180);
                    height: size(32);
                    background-image: url(../img/形状16小.png);
                    background-size: size(36) size(34); 
                    position: relative;
                    span{
                        font-size: size(26);
                        color: gray;
                        position: absolute;
                        right: size(-60);
                    }
                }
            }
        }
    }
}

